/*
 * @Description: grid布局
 * @Author: Zhanghan
 * @Date: 2025-03-28 20:11:47
 * @LastEditTime: 2025-04-07 17:24:53
 * @LastEditors: ZhangHan
 */
import "./index.less";
function Grid() {
  return (
    <>
      <div className="grid">
        <h1 className="text-center mb-2">grid布局</h1>
        <div className="my-contianer mb-4">
          <div className="left"></div>
          <div className="right"></div>
          <div className="left"></div>
          <div className="right"></div>
          <div className="left"></div>
          <div className="right"></div>
          <div className="left"></div>
          <div className="right"></div>
          <div className="left"></div>
        </div>
        <div className="grid-container">
          <div className="item header">Header</div>
          <div className="item sidebar">Sidebar</div>
          <div className="item main">Main Content</div>
          <div className="item one">Header</div>
          <div className="item two">Sidebar</div>
          <div className="item three">Main Content</div>
        </div>
      </div>
    </>
  );
}

export default Grid;
